<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <pe:importEnum type="vn.vfriends.vbox.model.RoleCode" var="RoleCode" allSuffix="ALL_ROLE_VALUES" />
    <pe:importEnum type="vn.vfriends.vbox.model.Provider" var="Provider" allSuffix="ALL_PROVIDER_VALUES" />
    <f:view contentType="text/html">    
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css"/>
            <title><ui:insert name="title">vBox</ui:insert></title>
        </h:head>
        <h:body>
            <h:outputStylesheet library="css" name="layout.css"/>
            <h:outputStylesheet library="css" name="component.css"/>
            
            <pe:ajaxErrorHandler widgetVar="ajaxErrorHandler" button="Hide" buttonOnclick="ajaxErrorHandler.hide();" />  
            <pe:ajaxErrorHandler type="javax.faces.application.ViewExpiredException" button="Reload"  
                     buttonOnclick="document.location.href=document.location.href;"  
                     body="Due to inactivity on page please push RELOAD to continue." title="Page expired ..."/>
            
            <ui:insert name="idleMonitor">
                <h:form id="monitorForm" prependId="false">
                    <p:idleMonitor timeout="#{session.maxInactiveInterval * 1000}" onidle="idleDialog.show();" 
                                   onactive='window.location = "#{request.contextPath}/index.jsf";'/>

                    <p:dialog header="Info" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                        <h:outputText value="Session is timeout" />
                    </p:dialog>
                </h:form>
            </ui:insert>
            
            <h:form id="statusForm" prependId="false">
                <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

                <p:dialog modal="false" widgetVar="statusDialog" header="Status"   
                          draggable="false" closable="false">  
                    <p:graphicImage value="#{resource['images:ajaxloadingbar.gif']}" />  
                </p:dialog>
            </h:form>
            
            <ui:insert name="dialog"></ui:insert>
            
            <pe:layout id="pageLayout">
                <pe:layoutPane position="north" closable="false" resizable="false">
                    <h:form id="headerForm">
                        <p:menu overlay="true" trigger="avatar" my="left top" at="left bottom">
                            <p:menuitem value="Profile" url="/profile.jsf"/>
                            <p:menuitem value="Add Storage" url="/storage/register.jsf"/>
                            <p:separator/>
                            <p:menuitem value="Logout" url="logout"/>
                        </p:menu>
                        
                        <h:outputText value="vBox" style="font-size: 20px; padding-left: 30px;"/>
                        <h:panelGroup style="position: relative; float: right; padding-top: 5px;">
                            <h:outputText value="#{securityBean.name}" style="padding-left: 10px; font-weight: bold;" 
                                          rendered="#{not empty request.remoteUser}"/>
                            <h:panelGroup id="avatar" style="padding-left: 10px;">
                                <p:graphicImage url="#{session.getAttribute('LOGGED_USER').pictureUrl}" 
                                                style="width: 40px; height: 40px; vertical-align: middle;"
                                                rendered="#{not empty session.getAttribute('LOGGED_USER').pictureUrl}"/>
                                <p:graphicImage value="#{resource['images:person-icon.png']}" 
                                                style="width: 40px; height: 40px; vertical-align: middle;"
                                                rendered="#{empty session.getAttribute('LOGGED_USER').pictureUrl and not empty request.remoteUser}"/>
                            </h:panelGroup>
                        </h:panelGroup>
                    </h:form>
                </pe:layoutPane>
                <pe:layoutPane position="center">
                    <ui:insert name="menu">
                        <pe:layoutPane position="west" size="200" rendered="#{not empty request.remoteUser}">
                            <f:facet name="header">Menu</f:facet>
                            <h:form id="menuForm">
                                <p:menu style="border: none; width: 100%;">
                                    <p:submenu label="Administration" rendered="#{request.isUserInRole('ADMIN')}">  
                                        <p:menuitem value="User Manager" icon="ui-icon-person" 
                                                    url="/admin/user/list.jsf" ajax="false"/>  
                                        <p:menuitem value="Role Manager" icon="ui-icon-person"
                                                    url="/admin/role/list.jsf" ajax="false"/>  
                                    </p:submenu>
                                </p:menu>
                            </h:form>
                        </pe:layoutPane>
                    </ui:insert>
                    <pe:layoutPane position="center">
                        <ui:insert name="content"></ui:insert>
                    </pe:layoutPane>
                </pe:layoutPane>
                <pe:layoutPane position="south" closable="false" resizable="false">
                    <h:outputText value="vfriends.vn"/>
                </pe:layoutPane>
            </pe:layout>
        </h:body>
    </f:view>    
</html>
